<template>
    <div>
          <!-- 轮播图区域 -->
        <mt-swipe :auto="4000">
            <!--  在组件中使用v-for，一定要使用key-->
            <!-- 谁用轮播图，谁传递 lunbotuList，即父组件向子组件传值-->
            <mt-swipe-item v-for="item in lunbotuList" :key="item.id">
                <!-- src是普通属性，如果要取img的值，应该进行绑定 -->
                <img :src="item.img" alt="" :class="{full:isfull} ">
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <!-- 分析：为什么商品评论中的轮播图丑 -->
    <!-- 1、首页中的图片，宽和高都是用了100%的宽度，所以首页没有问题  -->
    <!-- 2、在商品详情页面中，轮播图的图片也使用宽高100%，页面丑 -->
    <!-- 3、商品详情页面的轮播图期望高度100%，宽度为自适应 -->
    <!-- 4、问题原因为：首页中的轮播图和详情中的轮播图，分歧点是宽度到底是100%还是自适应 -->
    <!-- 5、解决方法：可以定义一个属性，让使用轮播图的调用者手动指定是否为100% -->



</template>
<script>
export default {
    props:["lunbotuList","isfull"]
}
</script>
<style lang="scss" scoped>
.mint-swipe{
    height: 200px;

    // .mint-swipe-item:nth-child(){ background: red;}
    .mint-swipe-item{
        text-align: center;
        // &:nth-child(1){
        //     background-color: red;
        // }
        // &:nth-child(2){
        //     background-color: blue;
        // }
        // &:nth-child(3){
        //     background-color: green;
        // }
    }
    img{
        //width: 100%;
        height: 100%;
    }
}
.full{
    width: 100%;
}
</style>